<template>
  <div class="app">
    <h2 class="xiu">休闲娱乐</h2>
    <div class="category-container">
      <div class="category-item">
        <img src="../../../../static/images/img.png" width="40px" height="40px" @click="tj"> <br>按摩/足疗
      </div>
      <div class="category-item">
        <img src="../../../../static/images/img_1.png" width="40px" height="40px"> <br> KTV
      </div>
      <div class="category-item">
        <img src="../../../../static/images/img_2.png" width="40px" height="40px"> <br>酒吧
      </div>
      <div class="category-item">
        <img src="../../../../static/images/img_3.png" width="40px" height="40px"> <br>电影
      </div>
      <div class="category-item">
        <img src="../../../../static/images/img_4.png" width="40px" height="40px"> <br>SPA
      </div>
      <div class="category-item">
        <img src="../../../../static/images/img_5.png" width="40px" height="40px" @click=""> <br>健身
      </div>
      <div class="category-item">
        <img src="../../../../static/images/img_6.png" width="40px" height="40px"> <br>游泳馆
      </div>
      <div class="category-item">
        <img src="../../../../static/images/img_7.png" width="40px" height="40px"> <br>游戏电玩
      </div>
      <div class="category-item">
        <img src="../../../../static/images/img_8.png" width="40px" height="40px"> <br>台球馆
      </div>
      <div class="category-item">
        <img src="../../../../static/images/img_9.png" width="40px" height="40px"> <br>亲子/农家乐
      </div>
      <div class="category-item">
        <img src="../../../../static/images/img_10.png" width="40px" height="40px" @click=""> <br>密室逃脱
      </div>
      <div class="category-item">
        <img src="../../../../static/images/img_11.png" width="40px" height="40px"> <br>网吧电竞
      </div>
      <div class="category-item">
        <img src="../../../../static/images/img_12.png" width="40px" height="40px"> <br>宠物店
      </div>
      <div class="category-item">
        <img src="../../../../static/images/img_13.png" width="40px" height="40px"> <br>瑜伽
      </div>
      <div class="category-item">
        <img src="../../../../static/images/img_14.png" width="40px" height="40px"> <br>球类运动
      </div>
    </div>
    <hr>
    <div class="button-container">
      <el-button style="font-size: 20px; border: 2px solid #e5c419; padding: 10px; border-radius: 5px; font-size: 10px;" @click="ren">低洼去哪了</el-button>
      <el-button style="font-size: 20px; border: 2px solid #e5c419; padding: 10px; border-radius: 5px; font-size: 10px;">最甜蜜的水果</el-button>
      <el-button style="font-size: 20px; border: 2px solid #e5c419; padding: 10px; border-radius: 5px; font-size: 10px;">生活随笔</el-button>
      <el-button style="font-size: 20px; border: 2px solid #e5c419; padding: 10px; border-radius: 5px; font-size: 10px;">小康生活</el-button>
      <el-button style="font-size: 20px; border: 2px solid #e5c419; padding: 10px; border-radius: 5px; font-size: 10px;">旅游胜地</el-button>
      <el-button style="font-size: 20px; border: 2px solid #e5c419; padding: 10px; border-radius: 5px; font-size: 10px;">旅行攻略</el-button>
    </div>
    <div class="image-row-container">
      <div class="image-item-container" >
        <img src="../../../../static/images/天安门.jpeg" width="120px" height="115px" style="border-radius: 10%;">
      </div>
      <div class="image-item-container">
        <img src="../../../../static/images/dujiacui.jpg" width="120px" height="115px" style="border-radius: 10%; margin-left: 10px;">
      </div>
      <div class="image-item-container">
        <img src="../../../../static/images/长江三峡.jpg" width="120px" height="115px" style="border-radius: 10%; margin-left: 10px;">
      </div>
      <div class="image-item-container">
        <img src="../../../../static/images/img_15.png" width="120px" height="115px" style="border-radius: 10%; margin-left: 10px;">
      </div>
    </div>
    <div class="banner-container">
      <img src="../../../../static/images/img_16.png" width="800px" height="120px" style="border-radius: 5%;">
    </div>
    <div class="spa-container" v-for="(entertainment, index) in tableData" :key="index">
      <div class="spa-item" @click="leisure(entertainment.entertainmentId)">
          <img :src="'http://localhost:6001'+entertainment.imgUrl" width="300px" height="200px" style="border-radius:5%;">
        <div class="spa-info">
          <span style="font-size: 25px;">{{entertainment.dingdanName}}</span>
          <br>
          <span style="font-size: 20px; color: #e5c419">{{entertainment.location}}分</span>
            <span style="font-size: 20px;">|￥{{entertainment.totalPrice}}/人</span>
          <span style="font-size: 20px; margin-left: 20px;">{{entertainment.massage}}</span>/<span style="font-size: 20px;">{{entertainment.pedicure}}</span>
          <br>
          <span style="font-size: 20px; border: 3px solid; color: #e5c419">会员{{entertainment.member}}折</span>
          <span style="font-size: 20px; margin-left: 20px; border: 3px solid; color: #e5c419">{{entertainment.collection}}人收藏</span>
        </div>
      </div>
      <div class="spa-item" @click="leisure(entertainment.entertainmentId)">
        <img :src="'http://localhost:6001'+entertainment.imgUrl" width="300px" height="200px" style="border-radius:5%;">
        <div class="spa-info">
          <span style="font-size: 25px;">{{entertainment.dingdanName}}</span>
          <br>
          <span style="font-size: 20px; color: #e5c419">{{entertainment.location}}分</span>
          <span style="font-size: 20px;">|￥{{entertainment.totalPrice}}/人</span>
          <span style="font-size: 20px; margin-left: 20px;">{{entertainment.massage}}</span>
          <br>
          <span style="font-size: 20px; margin-left: 20px; border: 3px solid; color: #e5c419">{{entertainment.collection}}人收藏</span>
        </div>
      </div>
    </div>
    <div style="margin-top: 40px;"
         v-loading="loading"
         element-loading-text="拼命加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"></div>
  </div>
</template>

<script>
const  url = "http://localhost:1000/"
export default {
  name:"Entertainment",
  data() {
    return {
      flag: false,
      loading: true,
      gold_medal_tourism:{},
      tableData: [],
      entertainmentId:'',
    }
  },
  methods: {
    findPage(){
      this.axios.post(url + "entertainment/findPage").then(res => {
        this.tableData = res.data.data;
      })
    },
    tj(){
      this.$router.push({path:"/club"})
    },
    leisure(entertainmentId){
      this.$router.push({
        path:'/pageimil',
        query:{
          entertainmentId:entertainmentId
        }
      })
    },
    ren() {
      // 待实现
    }
  },
  created() {
    this.findPage();
  }
}
</script>
<style scoped>
.app{
  width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
}
.xiu{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中，如果需要 */
}
.category-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.category-item {
  text-align: center;
  width: 100px;
  margin-bottom: 10px;
}
.button-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.image-row-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.image-item-container {
  width: 200px;
  height: 140px;
}
.banner-container {
  margin-bottom: 10px;
}
.spa-container {
  display: flex;
  justify-content: space-between;
}
.spa-item {
  width: 500px;
}
.spa-info {
  margin-top: 10px;
}
</style>
